<template>
  <el-container>
    <el-header height="76px">
      <h2>药品管理EX</h2>

      <!-- 面包屑导航区域 -->
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>

        <el-breadcrumb-item>药品管理EX</el-breadcrumb-item>
      </el-breadcrumb>
    </el-header>
    <el-main>
      <el-form inline>
        <el-form-item label="药品名称">
          <el-input
            v-model="queryCondition.mdNameLike"
            placeholder=""
          ></el-input>
        </el-form-item>
        <el-form-item label="药品产地">
          <el-input
            v-model="queryCondition.producerLike"
            placeholder=""
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="queryByCondition()"
            >search</el-button
          >
          <el-button type="success" @click="open4Insert()">Add</el-button>
        </el-form-item>
      </el-form>
      <!-- <div>{{ results }}</div> -->
      <el-table :data="results">
        <el-table-column label="药名名称" prop="mdName"></el-table-column>
        <el-table-column label="药名产地" prop="producer"></el-table-column>
        <el-table-column label="图片" prop="picUrl"></el-table-column>
        <el-table-column label="图片EX">
          <template #default="{row}">
            <!-- <div>{{'http://localhost:8080/image'+ row.picUrl  }}</div> -->
            <div
              style="width: 200px; height: 80px; background-color: rebeccapurple"
            >
              <img
                style="object-fit: fill; width: 100%;"
                :src="'http://localhost:8080/image' + row.picUrl"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作区">
          <template #default="{row}">
            <el-button type="warning" size="small" @click="open4Modify(row)"
              >edit</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :total="total"
        :current-page="queryCondition.pageNum"
        :page-size="queryCondition.pageSize"
        @current-change="queryByPage"
      ></el-pagination>
      <el-dialog :visible.sync="insertVisible" :append-to-body="true">
        <el-form label-width="auto" style="width: 300px;">
          <el-form-item label="药品名称">
            <el-input v-model="drug.mdName" placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="药品产地">
            <el-input v-model="drug.producer" placeholder=""></el-input>
          </el-form-item>

          <el-form-item label="药品图片">
            <el-upload
              :auto-upload="false"
              :file-list="fileList"
              :limit="1"
              :on-change="onChanged"
              action=""
            >
              <el-button type="primary">上传文件</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="insert()"
              >保存</el-button
            ></el-form-item
          >
        </el-form>
      </el-dialog>
    </el-main>
  </el-container>
</template>
<script>
// import { ElUpload } from "element-ui/types/upload";

/**
 * 页面核心数据结构体说明文档
 *     {
            "mdId": 1661913734,
            "mdName": "青霉素",
            "picUrl": "/1661913734.jpeg",
            "producer": "齐鲁药业",
            "operator": "小红2222",
            "updateTime": "2023-09-05T01:57:08"
        }
 *
 */
// import from
import request from "../../utils/request";
export default {
  name: "medical-drug",
  props: {
    sampleP: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      sampleD: "value",
      queryCondition: {
        mdNameLike: "",
        producerLike: "",
        pageNum: 1,
        pageSize: 6,
      },
      total: 0,
      results: [],
      drug: {
        mdName: "",
        producer: "",
      },
      fileList: [],
      insertVisible: false,
    };
  },
  computed: {
    /* sampleC() {
      return this.sampleD + "--";
    }, */
  },
  created() {},
  mounted() {
    // this.queryByCondition()
    this.queryByPage(1);
  },
  methods: {
    onChanged(a, b) {
      //   console.log(a, b);
      this.fileList = b;
    },
    // sampleM() {},
    async insert() {
      // multipart/form-data
      this.$message.warning(JSON.stringify(this.drug));
      console.log(this.fileList);

      const fd = new FormData();
      /*     private String mdName;
    private String producer;
    private MultipartFile pic; */
      fd.append("mdName", this.drug.mdName);
      fd.append("producer", this.drug.producer);
      fd.append("pic", this.fileList[0].raw);
      const res = await request({
        headers: {
          "Content-Type": "multipart/form-data",
        },
        url: "/medical_drug/insert",
        method: "post",
        data: fd,
      });
      console.log(res.data);
      this.insertVisible = false;
      this.queryByCondition();
    },
    async queryByCondition() {
      const res = await request({
        method: "post",
        url: "/medical_drug/query",
        data: this.queryCondition,
      });
      // console.log(res.data)
      this.total = res.data.total;
      this.results = res.data.list;
      // console.log(res.data.list)
    },
    async queryByPage(pageNum) {
      this.queryCondition.pageNum = pageNum;
      await this.queryByCondition();
    },
    open4Insert() {
      this.insertVisible = true;
    },
    open4Modify(row) {
      this.$notify.warning("将要修改" + row.mdId + row.mdName);
    },
  },
  watch: {
    // sampleP(n, o) {},
  },
};
</script>

<!--<style scoped>-->
<style lang="css" scoped></style>
<style lang="less" scoped>
@import "../../style/infoManage.less";
</style>
